<template>
    <view class="user-order-evaluate" v-if="isLoad">
        <!-- <back></back> -->
        <view class="fill-base pd-lg">
            <view class="f-title c-title pb-md">总体评价</view>
            <view class="flex-between">
                <view class="flex-warp">
                    <block v-for="(item, index) in 5" :key="index">
                        <i
                            @tap="checkStar(1, index * 1 + 1)"
                            class="star-icon text-bold iconfont mr-sm"
                            :class="[
                                { iconyduixingxingkongxin: star < index * 1 + 1 },
                                { iconyduixingxingshixin: star >= index * 1 + 1 },
                            ]"
                            :style="{ color: primaryColor }"
                        ></i>
                    </block>
                </view>
                <view class="f-paragraph c-caption">{{
                    star ? startObj[star - 1] : "请选择星级"
                }}</view>
            </view>
        </view>
        <view class="fill-base pd-lg">
            <view class="f-title c-title">服务项目</view>
            <block v-for="(aitem, aindex) in service_star" :key="aindex">
                <view class="f-paragraph c-paragraph pt-md pb-md">{{ aitem.title }}</view>
                <view class="flex-between">
                    <view class="flex-warp">
                        <block v-for="(item, index) in 5" :key="index">
                            <i
                                @tap="checkStar(2, index * 1 + 1, aindex)"
                                class="star-icon text-bold iconfont mr-sm"
                                :class="[
                                    { iconyduixingxingkongxin: aitem.star < index * 1 + 1 },
                                    { iconyduixingxingshixin: aitem.star >= index * 1 + 1 },
                                ]"
                                :style="{ color: primaryColor }"
                            ></i>
                        </block>
                    </view>
                </view>
            </block>
        </view>
        <view class="fill-body pt-md pb-md pl-lg f-caption c-caption">您的评价对我们很重要哦</view>
        <view class="fill-body radius-5 mt-lg ml-lg mr-lg pd-lg">
            <textarea
                v-model="text"
                class="f-paragraph c-caption"
                style="width: auto"
                maxlength="300"
                placeholder="请输入评价内容"
            ></textarea>
            <view class="pt-md f-caption c-nodata text-right"
                >已输入{{ text.length > 300 ? 300 : text.length }}/300
            </view>
        </view>
        <view class="flex-warp f-caption c-title pd-lg">
            <view
                @tap.stop="toChangeItem(index)"
                class="label-item fill-body flex-center mr-md mb-md pl-lg pr-lg radius"
                :class="[{ 'c-base': item.is_check }]"
                :style="{ background: item.is_check ? primaryColor : '' }"
                v-for="(item, index) in lableList"
                :key="index"
            >
                {{ item.title }}
            </view>
        </view>

        <view class="space-max-footer"></view>
        <fix-bottom-button
            @confirm="toSubmit"
            :text="[{ type: 'confirm', text: '提交' }]"
            bgColor="#fff"
        >
        </fix-bottom-button>
    </view>
</template>

<script>
import { mapState, mapMutations } from "vuex";
export default {
    components: {},
    data() {
        return {
            isLoad: false,
            options: {},
            startObj: ["不满意", "一般", "满意", "很满意", "非常满意"],
            star: 0,
            service_star: [],
            lableList: [],
            text: "",
            lockTap: false,
        };
    },
    computed: mapState({
        primaryColor: (state) => state.config.configInfo.primaryColor,
        subColor: (state) => state.config.configInfo.subColor,
    }),
    async onLoad(options) {
        this.$util.showLoading();
        this.options = options;
        this.initIndex();
    },
    methods: {
        ...mapMutations([]),
        async initIndex() {
            // #ifdef H5
            if (this.$jweixin.isWechat()) {
                await this.$jweixin.initJssdk();
                this.$jweixin.wxReady(() => {
                    this.$jweixin.hideOptionMenu();
                });
            }
            // #endif
            let { id } = this.options;
            let [order, label] = await Promise.all([
                this.$api.order.orderInfo({
                    id,
                }),
                this.$api.order.lableList(),
            ]);
            this.$util.setNavigationBarColor({
                bg: this.primaryColor,
            });
            let service_star = order.order_goods.map((item) => {
                return {
                    service_id: item.goods_id,
                    star: 5,
                    title: item.goods_name,
                };
            });
            label.map((item) => {
                item.is_check = false;
            });
            this.lableList = label;
            this.service_star = service_star;
            this.$util.hideAll();
            this.isLoad = true;
        },
        checkStar(type, star, index = 0) {
            if (type == 1) {
                this.star = star * 1;
            } else {
                let service_star = this.$util.deepCopy(this.service_star);
                service_star[index].star = star * 1;
                this.service_star = service_star;
            }
        },
        toChangeItem(index) {
            let { is_check } = this.lableList[index];
            this.lableList[index].is_check = !is_check;
        },
        async toSubmit() {
            let { options, star, text } = this;
            let { id: order_id } = options;
            if (!star) {
                this.$util.showToast({
                    title: "请选择总体评价星级",
                });
                return;
            }
            if (!text) {
                this.$util.showToast({
                    title: "请输入评价内容",
                });
                return;
            }
            let lable = [];
            this.lableList.map((item) => {
                if (!item.is_check) return;
                lable.push(item.id);
            });
            let service_star = this.$util.deepCopy(this.service_star);
            service_star.map((item) => {
                delete item.title;
            });
            let param = {
                order_id,
                star,
                service_star,
                text,
                lable,
            };
            if (this.lockTap) return;
            this.lockTap = true;

            this.$util.showLoading();
            try {
                await this.$api.order.addComment(param);
                this.$util.hideAll();
                this.$util.showToast({
                    title: `评论成功`,
                });
                this.lockTap = false;
                setTimeout(() => {
                    this.$util.back();
                    this.$util.goUrl({
                        url: 1,
                        openType: `navigateBack`,
                    });
                }, 1000);
            } catch (e) {
                setTimeout(() => {
                    this.lockTap = false;
                    this.$util.hideAll();
                }, 2000);
            }
        },
    },
};
</script>

<style lang="scss">
page {
    background: #fff;
}

.user-order-evaluate {
    .star-icon {
        font-size: 40rpx;
    }

    .label-item {
        height: 60rpx;
    }
}
</style>
